<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 计算属性与监视</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>案例—插值语法实现</h2>
    姓: <input type="text" name="firstName" v-model="one.firstName">
    名: <input type="text" name="lastName" v-model="one.lastName">
    <!--    编写规范指南： 模板表达式不建议做比较复杂的操作-->
    姓名: <span>{{one.firstName}} -  {{one.lastName.slice(0, 5)}}</span>

    <h2>案例—methods实现</h2>
    姓: <input type="text" name="firstName" v-model="two.firstName">
    名: <input type="text" name="lastName" v-model="two.lastName">
    姓名: <span>{{fullName()}}</span>

    <h2>案例—计算属性实现</h2>
    姓: <input type="text" name="firstName" v-model="three.firstName">
    名: <input type="text" name="lastName" v-model="three.lastName">
    姓名: <span>{{fullNameComputed}}</span>
    姓名: <span>{{simpleFullName}}</span>

</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            one: {
                firstName: 'Zhang',
                lastName: 'San'
            },
            two: {
                firstName: 'Zhang',
                lastName: 'San'
            },
            three: {
                firstName: 'Wan',
                lastName: 'Wu'
            }
        },
        methods: {
            fullName(bj, e) {
                return this.two.firstName + "-" + this.two.lastName.slice(0, 5)
            }
        },
        //计算属性
        computed: {
            fullNameComputed: {
                // fullName被调用, get()就会调用并返回 (调用时机: 1.初次读取fullName  2.所依赖数据发送变化)
                get() {
                    // 计算属性会缓存
                    return this.three.firstName + "-" + this.three.lastName.slice(0, 5)
                },
                // fullName被修改时调用
                set(value) {
                    console.log('set', value)
                }
            },
            // 简写 (确定计算属性只需要get方法)
            simpleFullName() {
                return this.three.firstName + "-" + this.three.lastName.slice(0, 5)
            }
        }
    });
</script>

</body>
</html>